<template>
  <el-aside width="220px" class="sidebar">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      router
    >
      <el-menu-item index="/class">
        <i class="el-icon-s-home"></i>
        <span class="menu-text">班级列表</span>
      </el-menu-item>
      
      <el-submenu v-if="showClassMenu" index="/class">
        <template #title>
          <i class="el-icon-menu"></i>
          <span class="menu-text">班级管理</span>
        </template>
        <el-menu-item index="/class/info/0">
          <span class="menu-text">班级信息</span>
        </el-menu-item>
        <el-menu-item index="/class/students/0">
          <span class="menu-text">学生管理</span>
        </el-menu-item>
        <el-menu-item index="/class/courses/0">
          <span class="menu-text">课程管理</span>
        </el-menu-item>
      </el-submenu>
      
      <el-menu-item index="/course">
        <i class="el-icon-document"></i>
        <span class="menu-text">课程管理</span>
      </el-menu-item>
      
      <el-menu-item index="/teacher">
        <i class="el-icon-user"></i>
        <span class="menu-text">教师管理</span>
      </el-menu-item>
      
      <el-menu-item index="/practice">
        <i class="el-icon-s-operation"></i>
        <span class="menu-text">实践活动</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-plus'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeMenu = computed(() => route.path)

const showClassMenu = computed(() => {
  return ['/class/info', '/class/students', '/class/courses'].some(
    path => route.path.startsWith(path)
  )
})
</script>

<style scoped>
.sidebar {
  height: calc(100vh - 60px);
  background-color: #f5f5f5;
  border-right: 1px solid #ebeef5;
}

.el-menu-vertical {
  height: 100%;
  border-right: none;
  font-size: 36px; /* 增大整体字体大小 */
}

.el-menu-item,
.el-submenu__title {
  height: 70px !important; /* 增大菜单项高度 */
  line-height: 50px !important;
}

.menu-text {
  font-size: 20px; /* 增大文字大小 */
  margin-left: 8px; /* 调整图标与文字间距 */
}

.el-icon {
  font-size: 18px !important; /* 增大图标大小 */
}

.el-submenu .el-menu-item {
  padding-left: 50px !important; /* 调整子菜单缩进 */
  height: 46px !important;
  line-height: 46px !important;
}
</style>